<template>
  <view>
    <view class="panel-list">
      <!-- 第1个面板 -->
      <view class="panel">
        <view class="panel-title">运动服务</view>
        <view class="panel-body">
          <view class="panel-item" v-for="(item, i) in panelOne" :key="i" @click="gotoFunction(i)">
            <view class="panel-item-img">
              <image class="img" :src="'../../static/function_icons/' + (i+1) + '.png'" mode="aspectFit"></image>
            </view>
            <view class="panel-item-text">
              <text>{{item}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 第2个面板 -->
      <view class="panel">
        <view class="panel-title">辅助服务</view>
        <view class="panel-body">
          <view class="panel-item" v-for="(item, i) in panelTwo" :key="i" @click="gotoFunction(i + 3)">
            <view class="panel-item-img">
              <image class="img" :src="'../../static/function_icons/' + (i+4) + '.png'" mode="aspectFit"></image>
            </view>
            <view class="panel-item-text">
              <text>{{item}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 第3个面板 -->
      <view class="panel">
        <view class="panel-title">其他服务</view>
        <view class="panel-body">
          <view class="panel-item" v-for="(item, i) in panelThree" :key="i" @click="gotoFunction(i + 6)">
            <view class="panel-item-img">
              <image class="img" :src="'../../static/function_icons/' + (i+7) + '.png'" mode="aspectFit"></image>
            </view>
            <view class="panel-item-text">
              <text>{{item}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['token'])
    },
    data() {
      return {
        // 功能页面三个面板的功能
        panelOne: ['计时', '音乐', '打卡'],
        panelTwo: ['宝典', '商城', '计划'],
        panelThree: ['营养查询', 'BMI查询', '健身房查询'],
        // 各功能对应跳转的路径名称
        interfaces: ['timer', 'music', 'calendar', 'guidance', 'stop', 'plan', 'nutrition', 'BMI', 'gym'],
      };
    },
    methods: {
      gotoFunction(index) {
        // 点击的功能序号
        const Url = this.interfaces[index];
        if (!this.token && (Url === 'timer' || Url === 'music' || Url === 'calendar' || Url === 'guidance' || Url === 'stop' || Url ===
            'plan')) return uni.$showMsg('请先登录')
        // 点击的功能页面路径
        const targetUrl = `../../subpkg/${Url}/${Url}`;
        // 跳转到点击的功能页面
        uni.navigateTo({
          url: targetUrl
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    // background: -webkit-linear-gradient(top,white 0%,#f6faff 100%);
  }

  .panel-list {
    padding: 20rpx 50rpx 50rpx 50rpx;

    .panel {
      height: 280rpx;
      margin-top: 30rpx;
      padding-top: 4rpx;
      // box-shadow: 0px 2px 4px 0.1px #c9c9ca;
      box-shadow: 0px 1px 2px 0.1px #ddd;
      border-radius: 15rpx;
      background-color: #fff;
      // border: 1px solid red;

      .panel-title {
        border-left: 5px solid #fba007;
        height: 50rpx;
        line-height: 50rpx;
        margin: 20rpx 0 0 20rpx;
        padding-left: 20rpx;
        font-size: 28rpx;
      }

      .panel-body {
        display: flex;
        justify-content: space-around;

        .panel-item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-direction: column;
          padding: 24rpx 0;

          .panel-item-img {
            width: 60rpx;
            height: 60rpx;
            background: linear-gradient(to bottom right, #fffffa, #fff4e0, #fff6f6);
            border: 24rpx solid #fff4e0;
            border-radius: 50%;

            .img {
              width: 100%;
              height: 100%;
            }
          }

          .panel-item-text {
            margin-top: 14rpx;
            font-size: 26rpx;
          }
        }
      }
    }
  }
</style>